<template>
  <div class="index">
    <blur :blur-amount=40 :url="headimgurl">
      <p class="center"><img :src="headimgurl"></p>
    </blur>
    <group class="userinfo">
      <div class="demo" v-for="(item,index) in userInfo" :key="index" @click="handleClick(index)">
        <svg class="icon" aria-hidden="true">
            <use :xlink:href="'#'+item.icon"></use>
        </svg>
        {{item.title}}
      </div>
    </group>
  </div>
</template>

<script>
import { Flexbox, FlexboxItem, Blur, Group, Cell } from "vux";
import { getUserInfo } from "../../utils/localstorage";
export default {
  components: {
    Blur,
    Flexbox,
    FlexboxItem,
    Group,
    Cell
  },
  created() {
    const userInfo = getUserInfo();
    this.name = userInfo.nickname;
    this.headimgurl = userInfo.headimgurl;
  },
  methods: {
    handleClick(index) {
      this.$router.push({ name: "userinfo", query: { id: index } });
    }
  },
  data() {
    return {
      headimgurl: "",
      name: "",
      userInfo: [
        {
          title: "个人信息",
          icon: "icon-buqian"
        },
        {
          title: "个人信息",
          icon: "icon-buqian"
        },
        {
          title: "个人信息",
          icon: "icon-buqian"
        },
        {
          title: "个人信息",
          icon: "icon-buqian"
        }
      ]
    };
  }
};
</script>

<style lang='less' scoped>
.userinfo {
  margin-top: 15px;
}
.icon {
  margin-right: 10px;
}
.demo {
  position: relative;
  padding-right: 13px;
  color: #000;
  padding: 10px 15px;
  display: flex;
  -webkit-box-align: center;
  align-items: center;
  user-select: none;
  font-size: 17px;
  line-height: 1.4em;
  border-top: 1px solid #eee;
  &:after {
    content: "";
    display: inline-block;
    height: 6px;
    width: 6px;
    border-width: 2px 2px 0 0;
    border-color: #c8c8cd;
    border-style: solid;
    -webkit-transform: matrix(0.71, 0.71, -0.71, 0.71, 0, 0);
    transform: matrix(0.71, 0.71, -0.71, 0.71, 0, 0);
    position: relative;
    top: -2px;
    position: absolute;
    top: 50%;
    margin-top: -4px;
    right: 17px;
  }
  &:active {
    background-color: #c8c8cd;
  }
}
.center {
  text-align: center;
  padding-top: 20px;
  color: #fff;
  font-size: 18px;
}
.center img {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  border: 4px solid #ececec;
}
</style>
